<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-10-19 20:57:16
 * @LastEditors: charles
 * @LastEditTime: 2021-10-21 17:18:34
-->
<template>
  <div ref="root"></div>
</template>
<script>
import { Pie } from '@antv/g2plot';
import {get} from '@/utils/request'
export default {
  data(){
    return {
      plot:null,
      data:[]
    }
  },
  async mounted(){
    await this.loadOrderStatus();
    this.initChart();
  },
  beforeDestroy(){
    if(this.plot){
      this.plot.destroy();
    }
  },
  methods:{
    async loadOrderStatus(){
      let url = "/statistics/orderStatus"
      let resp =await get(url);
      for(let key in resp.data){
        let val = resp.data[key]
        let item = {year:key,value:val}
        this.data.push(item)
      }
    },
    initChart(){
      const data =this.data;
      let container = this.$refs.root ;
      container.style.height = '180px'
      this.plot = new Pie(container, {
        data,
        angleField: 'value',
        colorField: 'year',
        legend: { position: 'bottom' }
      });

      this.plot.render();
    }
  }
}
</script>